<%--
  Created by IntelliJ IDEA.
  User: yuyufeng
  Date: 2018/1/22
  Time: 10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机端滑块验证码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #valid-image {
            /*background-image: url("static/image/valid.png");*/
            width: 312px;
            height: 155px;
            /*border: 1px solid red;*/
        }

        #valid-slider {
            /*background-image: url("static/image/slider.png");*/
            width: 55px;
            height: 55px;
            border: solid 1px #ffffff;
            position: absolute;
            left: 32px;
            top: 100px;
            display: none;
            /*border: 1px solid red;*/

        }

        #slider-message {
            color: #45494c;
            line-height: 40px;
            text-align: center;
            margin-top: -39px;
        }

        #slider-box {
            border: solid 1px #CCCCCC;
            width: 312px;
            height: 40px;
            margin-top: 10px;
            position: relative;
            background-color: #EEEEEE;
        }

        #slider-item {
            position: absolute;
            top: -3px;
            height: 44px;
            width: 42px;
            text-align: center;
            line-height: 42px;
            border: solid 1px #CCCCCC;
            background-color: #FFFFFF;
            border-radius: 5px;
            position: absolute;
            cursor: pointer;
        }

        #slider-item-left {
            width: 0px;
            height: 40px;
            margin-top: -1px;
            margin-left: -1px;
            border: solid 1px #CCCCCC;
            border-right: none;

            filter: alpha(opacity=10);
            -moz-opacity: 0.1;
            -khtml-opacity: 0.1;
            opacity: 0.1;
        }

        #login-button {
            width: 312px;
            height: 40px;
            color: #FFFFFF;
            text-align: center;
            line-height: 40px;
            background-color: #46b8da;
            margin-top: 20px;
            cursor: pointer;
            display: none;
        }

        #refresh-button {
            z-index: 100;
            float: right;
            font-size: 20px;
            margin: 8px;
            color: #FFFFFF;
            opacity: 0.75;
            cursor: pointer;
        }

        #loading-div {
            /*border: 1px solid red;*/
            /*display: none;*/
            position: absolute;
            left: 170px;
            top: 115px;
        }

        #loading-div p {
            /*border: 1px solid red;*/
            margin-left: -4px;
            margin-top: 5px;
        }

        .noselect {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Chrome/Safari/Opera */
            -khtml-user-select: none; /* Konqueror */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently not supported by any browser */
        }

    </style>
</head>

<body>
<h3 class="text-center">手机端滑块验证码</h3>
<div id="valid-image" class="center-block noselect"><b class="glyphicon glyphicon-refresh" id="refresh-button"></b>
    <div id="loading-div">
        <image src="static/image/loading.gif"/>
        <p>加载中..</p></div>
</div>
<div id="valid-slider" class="noselect"></div>
<div id="slider-box" class="center-block">
    <div id="slider-item-left"></div>
    <div id="slider-item" class="glyphicon glyphicon-arrow-right"></div>
    <div id="slider-message" class="noselect">向右滑动滑块填充拼图</div>
</div>
<div id="login-button" class="center-block">登录</div>
</body>
<script src="static/jquery.js"></script>
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<script>
    var validWidth = 312
    /*拼图背景宽度*/
    var validHeight = 155
    /*拼图背景高度*/

    var validSalider = document.getElementById("valid-slider")
    /*拼图移动块*/
    var validImage = document.getElementById("valid-image")
    /*拼图背景图片*/
    var sliderBox = document.getElementById("slider-box")
    /*滑块box*/
    var sliderItem = document.getElementById("slider-item")
    /*滑块*/
    var sliderItemLeft = document.getElementById("slider-item-left")
    /*滑块左边颜色div*/
    var sliderMessage = document.getElementById("slider-message")
    /*滑块消息*/
    var loginButton = document.getElementById("login-button")
    /*登录按钮*/
    var refreshButton = document.getElementById("refresh-button")
    /*刷新图片按钮*/
    var loadingDiv = document.getElementById("loading-div")
    /*loading动图*/

    var boxLeft
    /*滑块box left位移位置*/

    var validSaliderTop;
    /*拼图移动块Top位置*/
    var validSaliderWidth
    /*拼图移动块宽度*/

    //第一次加载验证码 和样式
    loadInit()
    //    loadValidImage()


    /* 重新加载css样式*/
    function loadInit() {
        validSalider.style.display = 'none'
        boxLeft = sliderBox.offsetLeft;
        validSalider.style.left = boxLeft + 'px';
        validSaliderWidth = validSalider.offsetWidth


        /*还原样式*/
        setTimeout(function () {
            sliderItem.style.backgroundColor = '#FFFFFF'
            sliderBox.style.backgroundColor = '#EEEEEE'
            sliderBox.style.borderColor = '#CCCCCC'
            sliderItem.style.backgroundColor = '#FFFFFF'
            sliderItem.style.color = '#FFFFFF'
            sliderItem.setAttribute('class', 'glyphicon glyphicon-arrow-right')
            sliderItem.style.color = '#333';
            sliderItemLeft.style.borderColor = '#CCCCCC'
            sliderItemLeft.style.backgroundColor = '#EEEEEE'
        }, 500)


        /* 还原滑块和拼图位置*/
        validSalider.style.left = boxLeft + 'px';
        sliderItemLeft.style.width = 0;
        sliderItem.style.left = -1 + 'px';


        loadingDiv.style.left = (document.body.offsetWidth / 2 - 20) + 'px'
        /*设置loading图片的动画位置*/


        /*显示loading动画，并且去掉拼图图片*/
        loadingDiv.style.display = 'block'
        validImage.style.backgroundImage = null
        validSalider.style.backgroundImage = null

        /*ajax请求获取验证信息*/
        $.get("/validImageJsonMB", function (data) {
            var data = JSON.parse(data)
            /*重新设置滑块位置*/
            validSaliderTop = data.locationY + validImage.offsetTop
            validSalider.style.top = validSaliderTop + 'px';
            if (data.status == 200) {
                /*重新加载拼图图片*/
                validImage.style.backgroundImage = "url('/validImageMB?date=" + new Date().getTime() + "')"
                validSalider.style.backgroundImage = "url('/validImageLocationMB?date=" + new Date().getTime() + "')"
            }
            loadingDiv.style.display = 'none'
            /*隐藏loading动画*/
        })


    }

    function downInit() {

        validSalider.style.display = 'block'
        boxLeft = sliderBox.offsetLeft;
        validSalider.style.left = boxLeft + 'px';

        /*移动拼图的位置和状态*/
        boxLeft = sliderBox.offsetLeft;
        validSalider.style.left = boxLeft + 'px';
        validSaliderWidth = validSalider.offsetWidth

        /* 滑块的滑动时的样式*/
        sliderItem.style.backgroundColor = '#1991fa'
        sliderItem.style.color = '#FFFFFF'
        sliderMessage.innerHTML = "";
        sliderItem.style.transition = 'left 0s'
        sliderItem.style.mozTransition = 'left 0s'
        sliderItem.style.webkitTransition = 'left 0s'
        sliderItem.style.oTransition = 'left 0s'
        sliderItemLeft.style.transition = 'width 0s'
        sliderItemLeft.style.mozTransition = 'width 0s'
        sliderItemLeft.style.webkitTransition = 'width 0s'
        sliderItemLeft.style.oTransition = 'width 0s'
    }

    //移动端滑动
    sliderItem.ontouchstart = function (e) {
        downInit()

        document.ontouchmove = null
        document.ontouchend = null

        document.ontouchmove = function (e) {
            var left = e.targetTouches[0].clientX - boxLeft
            if (left < 0) {
                left = 0;
            }
            if (left > (validWidth - sliderItem.offsetWidth)) {
                left = validWidth - sliderItem.offsetWidth
            }

            sliderItem.style.left = left + 'px';

            sliderItemLeft.style.width = left + 10 + 'px';
            sliderItemLeft.style.backgroundColor = '#1991fa'
            sliderItemLeft.style.borderColor = '#1991fa'
            var validerSaliderLeft = (left / (validWidth - sliderItem.offsetWidth)) * (validWidth - validSaliderWidth)
            validSalider.style.left = validerSaliderLeft + boxLeft + 'px';

        }

        document.ontouchend = function (e) {
            document.ontouchmove = null
            document.ontouchend = null
            var location = (validSalider.offsetLeft - boxLeft) + ',' + (validSaliderTop - validImage.offsetTop)
            doValid(location)
        }

    }


    //pc端滑动
    sliderItem.onmousedown = function (e) {
        document.onmousemove = null
        document.onmouseup = null

        downInit()



        document.onmousemove = function (e) {
            var left = e.clientX - boxLeft
            if (left < 0) {
                left = 0;
            }

            if (left > (validWidth - sliderItem.offsetWidth)) {
                left = validWidth - sliderItem.offsetWidth
            }

            sliderItem.style.left = left + 'px';
            sliderItemLeft.style.width = left + 10 + 'px';
            sliderItemLeft.style.backgroundColor = '#1991fa'
            sliderItemLeft.style.borderColor = '#1991fa'

            var validerSaliderLeft = (left / (validWidth - sliderItem.offsetWidth)) * (validWidth - validSaliderWidth)
            validSalider.style.left = validerSaliderLeft + boxLeft + 'px';
        }

        document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
            var location = (validSalider.offsetLeft - boxLeft) + ',' + (validSaliderTop - validImage.offsetTop)
            doValid(location)
        }

    }


    function doValid(location) {
        sliderMessage.innerHTML = "验证中...";
        $.get("/doValidServletMB?location=" + location, function (res) {
            sliderMessage.innerHTML = "";
            if (res.status == 200) {
                /* 验证成功，显示成功样式*/
                sliderItem.style.backgroundColor = '#FFFFFF'
                sliderItemLeft.style.borderColor = '#52ccba'
                sliderItemLeft.style.backgroundColor = '#52ccba'
                sliderItem.style.backgroundColor = '#52ccba'
                sliderItem.style.color = '#FFFFFF'
                sliderItem.setAttribute('class', 'glyphicon glyphicon-ok')

                //隐藏滑块，显示登录按钮
                /*setTimeout(function () {
                    loginButton.style.display = 'block';
                    $(sliderBox).hide("fast")
                }, 300)*/

            } else {
                /* 验证失败，显示失败样式*/
                sliderItem.style.backgroundColor = '#FFFFFF'
                sliderItemLeft.style.borderColor = '#f57a7a'
                sliderItemLeft.style.backgroundColor = '#f57a7a'
                sliderItem.style.backgroundColor = '#f57a7a'
                sliderItem.style.color = '#FFFFFF'
                sliderItem.setAttribute('class', 'glyphicon glyphicon-remove')


                //滑动缓冲
                sliderItem.style.transition = 'left 0.5s'
                sliderItem.style.mozTransition = 'left 0.5s'
                sliderItem.style.webkitTransition = 'left 0.5s'
                sliderItem.style.oTransition = 'left 0.5s'

                sliderItemLeft.style.transition = 'width 0.5s'
                sliderItemLeft.style.mozTransition = 'width 0.5s'
                sliderItemLeft.style.webkitTransition = 'width 0.5s'
                sliderItemLeft.style.oTransition = 'width 0.5s'

                //还原
                loadInit()

                setTimeout(function () {
                    sliderMessage.innerHTML = "验证失败，请重新滑动拼图";
                }, 300)
            }


        })
    }

    refreshButton.onclick = function () {
        loadInit()
    }


</script>
</html>
